import React, { memo, useRef, useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { ArtistSongWrap } from "./style";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { formalMinuteSeconds } from "@/utils/format-utils";
import Four from "@/components/button/fourCheck";
import { NavLink } from "react-router-dom";
import classNames from "classnames";
import DragZ from "@/components/drag";
import {
  getSongDetailsMessage,
  addSongId,
} from "../../pages/player/store/actionType";
import { getPlayUrl } from "@/utils/format-utils";
import CoverMask from "@/components/coverMask";

export default memo(function ArtistSong(props) {
  const iconRef = useRef();
  const [closeTips, setCloseTips] = useState(0);
  const [left, setLeft] = useState(0);
  const [top, setTop] = useState(0);
  const [btnNumber, setBtnNumber] = useState(null);
  const [open, setOpen] = useState(false);

  const dispatch = useDispatch();

  const collectSongs = (id) => {};
  const zhuanfaSongs = (id) => {};
  const loadSongs = (id) => {};

  const playMusic = (e, ids) => {
    if (e.target.className.indexOf("noplaybtn") !== -1) {
      setOpen(true);
      setCloseTips(1);
      const scrolltopTemp =
        document.documentElement.scrollTop || document.body.scrollTop;
      // (document.body.clientWidth/2-240,document.body.clientHeight/2-101,scrolltopTemp)
      const pLeft = document.body.clientWidth / 2 - 240;
      const pTop = document.body.clientHeight / 2 - 101 + scrolltopTemp;
      setLeft(pLeft);
      setTop(pTop);
      // (left,top)
    } else {
      getPlayUrl(ids).then((res) => {
        // freeTrialInfo 若不为null则要收费
        if (res.data[0].freeTrialInfo) {
          setOpen(true);
          return;
        } else {
          setBtnNumber(ids);
          dispatch(getSongDetailsMessage(ids));
          dispatch(addSongId(ids));
        }
      });
    }
  };

  const { playLists } = useSelector(
    (state) => ({
      playLists: state.getIn(["player", "songLists"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    if (playLists[0]) {
      setBtnNumber(playLists[0].id);
    }
  }, [playLists]);

  const closeTipsWindow = (num) => {
    setCloseTips(num);
  };

  const close = () => {
    setOpen(false);
  };

  // (props.hotSong.hotSongs)
  return (
    <div>
      {createPortal(
        <CoverMask close={close} open={open} />,
        document.getElementById("root")
      )}
      <DragZ kg={closeTips} pleft={left} ptop={top} close={closeTipsWindow} />
      <ArtistSongWrap>
        <ul>
          {props.hotSong
            ? props.hotSong.hotSongs.map((item, index) => {
                const playing = item.id === btnNumber;
                return (
                  <li
                    className={classNames({ noplay: item.st === 0 })}
                    key={item.id}
                  >
                    <div className="index-play">
                      <span>{index + 1}</span>
                      <i
                        ref={iconRef}
                        onClick={(e) => playMusic(e, item.id)}
                        className={
                          playing
                            ? "playing"
                            : item.st !== 0
                            ? "play-btn"
                            : "play-btn noplaybtn"
                        }
                      ></i>
                    </div>
                    <div className="artist-title-video">
                      <div className="artist-title-name">
                        <NavLink
                          to={{
                            pathname: "/song",
                            search: "?id=" + item.id,
                          }}
                        >
                          {item.name}
                        </NavLink>
                        {item.alia.length !== 0 ? (
                          <span>-{item.alia}</span>
                        ) : item.tns !== undefined ? (
                          <span>-{item.tns}</span>
                        ) : (
                          ""
                        )}
                      </div>
                      {item.mv == 0 ? (
                        ""
                      ) : (
                        <NavLink
                          to={{
                            pathname: "/mv",
                            search: "?id=" + item.mv,
                          }}
                        >
                          <i className="mv-icon"></i>
                        </NavLink>
                      )}
                    </div>
                    <div className="hotSong-time">
                      {item.st === 0 ? (
                        <div className="h-st">
                          {formalMinuteSeconds(item.dt)}
                        </div>
                      ) : (
                        <>
                          <div className="h-dt">
                            {formalMinuteSeconds(item.dt)}
                          </div>
                          <div className="fourBox">
                            <Four
                              id={item.id}
                              collectSongs={(e) => collectSongs(item.id)}
                              zhuanfaSongs={(e) => zhuanfaSongs(item.id)}
                              loadSongs={(e) => loadSongs(item.id)}
                            />
                          </div>
                        </>
                      )}
                    </div>
                    <span className="hotSong-name">
                      <NavLink
                        to={{
                          pathname: "/album",
                          search: "?id=" + item.al.id,
                        }}
                      >
                        {item.al.name}
                      </NavLink>
                    </span>
                  </li>
                );
              })
            : ""}
        </ul>
      </ArtistSongWrap>
    </div>
  );
});
